<template>
  <div>
    <a-card title="选择题">
      <template #extra>
        <a-link>More</a-link>
      </template>
      <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
        <a-form-item field="name" label="题干">
          <a-input v-model="form.stem" placeholder="请输入选择题题干……" />
        </a-form-item>
        <a-form-item field="post" label="选项A">
          <a-input v-model="form.option1" placeholder="请输入选项A……" />
        </a-form-item>
        <a-form-item field="post" label="选项B">
          <a-input v-model="form.option2" placeholder="请输入选项B……" />
        </a-form-item>
        <a-form-item field="post" label="选项C">
          <a-input v-model="form.option3" placeholder="请输入选项C……" />
        </a-form-item>
        <a-form-item field="post" label="选项D">
          <a-input v-model="form.option4" placeholder="请输入选项D……" />
        </a-form-item>
        <!--<a-form-item field="isRead">-->
        <!--  <a-checkbox v-model="form.isRead">-->
        <!--    I have read the manual-->
        <!--  </a-checkbox>-->
        <!--</a-form-item>-->
        <a-form-item>
          <!-- <a-button type="primary" @click="onNextClick">
            {{ $t('stepForm.button.next') }}
          </a-button> -->
          <a-space>
            <a-button type="secondary" @click="goPrev">
              {{ $t('stepForm.button.prev') }}
            </a-button>
            <a-button type="primary" @click="onNextClick">
              {{ $t('stepForm.button.next') }}
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { BaseInfoModel, ChannelInfoModel } from '@/api/form';

  // export default {
  //   name: "choice-question"
  // }
  const emits = defineEmits(['changeStep']);

  const formRef = ref<FormInstance>();
  const formData = ref<ChannelInfoModel>({
    advertisingSource: '',
    advertisingMedia: '',
    keyword: [],
    pushNotify: true,
    advertisingContent: '',
  });
  const form = reactive({
    stem: '',
    option1: '',
    option2: '',
    option3: '',
    option4: '',
    isRead: false,
  });

  // const handleSubmit = (data) => {
  //   console.log(data)
  // }

  const onNextClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      emits('changeStep', 'submit', { ...formData.value });
    }
  };
  const goPrev = () => {
    emits('changeStep', 'backward');
  };
</script>

<style scoped></style>
